{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['模块管理:market/index/index', '模块列表'])}
    <div class="card">
        <div class="card-body">
            <div id="toolbar" class="toolbar-btn-action">
                <input type="file" id="fileInput" style="display: none;">
                <button id="btn_upload" type="button" class="btn btn-primary me-1 btn-sm">
                    <span class="mdi mdi-upload"></span> 模块上传
                </button>
                <button type="button" class="btn btn-default me-1 btn-sm" onclick="goWeb();">
                    <span class="mdi mdi-link-variant"></span> 访问模块市场
                </button>
            </div>
            <table id="table"></table>
        </div>
    </div>

<script>
    var layerIndex;
    function goWeb(){
        window.open("http://lutui.net/");
    }
    function setStatus(name){
        xp_confirm("{:url('market/index/status')}", {name: name}, function (){
            $('#table').bootstrapTable('refresh');
        });
    }
    function removeApp(name){
        xp_confirm("{:url('market/index/uninstall')}", {name: name}, function (){
            $('#table').bootstrapTable('refresh');
        }, '卸载会删除模块文件与数据，请谨慎操作!');
    }
    function installApp(name){
        xp_confirm("{:url('market/index/install')}", {name: name}, function (){
            $('#table').bootstrapTable('refresh');
        }, '确认要安装这个模块吗？');
    }
    function checkApp(name, callback){
        $.post("{:url('market/index/check')}", {name: name}, function (res){
            if (res.msg){
                xp_notify(res.msg);
            }else{
                callback();
            }
        });
    }
    function configApp(name){
        checkApp(name, function (){
            layerIndex = open_layer('参数配置', "{:url('market/index/config')}?name=" + name + "&iframe=1", function (){});
        });
    }
    function taskApp(name){
        checkApp(name, function (){
            layerIndex = open_layer('定时任务', "{:url('market/index/task')}?name=" + name + "&iframe=1", function (){}, ['50%', '50%']); 
        })
    }
    $(function (){
        // table
        $('#table').bootstrapTable({
            toolbar: '#toolbar',
            classes: 'table table-bordered table-hover table-striped lyear-table',
            url: "{:url('market/index/data')}",
            pagination: false,
            search: false,
            columns: [
                {'field': 'title', title: '模块名称', formatter: function (value, item) {
                    return `<span class="${item.icon}"></span> ${value}`;
                }},
                {'field': 'name', title: '模块标识'},
                {'field': 'version', title: '版本号'},
                {'field': 'priority', title: '排序'},
                {'field': 'delete', title: '状态', formatter: function (value, item){
                    var dom = value ? '<span class="badge bg-danger">已停用</span>' : '<span class="badge bg-success">已启用</span>';
                    return `<span style="cursor: pointer;" onclick="setStatus('${item.name}');">${dom}</span>`;
                }},
                {'field': 'config', title: '配置', formatter: function (value, item){
                    return value ? `<span class="badge bg-info" onclick="configApp('${item.name}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-cog-outline"></span> 配置</span>` : '-';
                }},
                {'field': 'clock', title: '任务', formatter: function (value, item){
                    return value ? `<span class="badge bg-warning" onclick="taskApp('${item.name}');" style="cursor: pointer; margin-left: 5px;"><span class="mdi mdi-clock-outline"></span> 任务</span>` : '-';
                }},
                {'field': 'installed', title: '操作', formatter: function (value, item){
                    var one = `<span class="badge bg-danger" onclick="removeApp('${item.name}');" style="cursor: pointer;"><span class="mdi mdi-delete-outline"></span> 卸载</span>`;
                    var two = `<span class="badge bg-teal" onclick="installApp('${item.name}');" style="cursor: pointer;"><span class="mdi mdi-tools"></span> 安装</span>`;
                    return value ? one : two;
                }},
            ]
        });
        // upload
        $('#btn_upload').on('click', function() {
            $('#fileInput').trigger('click');
        });
        $('#fileInput').on('change', function() {
            var file = this.files[0];
            if (file){
                var l = $('body').lyearloading({
                    opacity: 0.2,
                    spinnerSize: 'lg'
                });
                var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: '{:url("market/index/upload")}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(res) {
                        l.destroy();
                        if (res.msg){
                            layer.alert(res.msg, {
                                icon: 'error',
                            });
                        }else{
                            layer.alert('模块安装/更新成功', {
                                icon: 'success',
                            });
                            $('#table').bootstrapTable('refresh');
                        }
                    },
                    error: function(xhr, status, error) {
                        l.destroy();
                        layer.alert(`上传出错: ${error}`, {
                            icon: 'error',
                        });
                    }
                });
            }
        });
    });
</script>
<style>
    .a{cursor: pointer;}
</style>